import { useRoleManageActions, useRoleState } from '@/store/roleManageStore';
import { Button, Col, Input, message, Modal, Row, Space } from 'antd';
import { useEffect, useState } from 'react';
import CdtMetadataItem from './CdtMetadataItem';
import { Size } from '@/types/common';
import { CdtMetaParam } from '@/types/role';
import roleService from '@/api/services/roleService';
interface Props {
  visible: boolean;
  parentSize: Size | undefined;
  onCancel: () => void;
  onCancelText?: string;
  onConfirmText?: string;
}
const EditCdtMetadataModal = ({ visible, parentSize, onCancel }: Props) => {
  const style: React.CSSProperties = { padding: '8px 0' };
  const { getCdtMetaData } = useRoleManageActions();
  const { cdtMetaData } = useRoleState();
  const [params, setParams] = useState<CdtMetaParam[]>(cdtMetaData.params);
  const [isUpdate, setIsUpdate] = useState(false);

  const handleParamChange = (newParam: CdtMetaParam) => {
    setIsUpdate(true);
    setParams((prevParams) =>
      prevParams.map((param) => (param.id === newParam.id ? newParam : param)),
    );
  };

  const onConfirm = async () => {
    try {
      await roleService.updateConditionParams(params);
      message.success('批量更新成功！');
      onCancel();
    } catch (error) {
      console.error(error);
    }
  };

  const handleCancelClicked = () => {
    onCancel();
  };

  useEffect(() => {
    if (visible) {
      getCdtMetaData();
    }
    setIsUpdate(false);
  }, [visible]);

  useEffect(() => {
    setParams(cdtMetaData.params);
  }, [cdtMetaData]);

  return (
    <>
      <Modal
        className="role-new-modal"
        title={
          <div style={{ textAlign: 'left', width: '100%' }}>
            关键字管理
            {/* <span style={{fontSize: "14px", color: "#c5c5c5"}}>{isUpdate ? '(未保存)' : ''}</span> */}
          </div>
        }
        open={visible}
        onCancel={handleCancelClicked}
        okText="确定"
        cancelText="取消"
        width={1000}
        centered
        maskClosable={false}
        footer={
          <div style={{ textAlign: 'right' }}>
            <Button className="w-24" onClick={handleCancelClicked}>
              取消
            </Button>
            <Button type="primary" onClick={onConfirm} className="ml-4 w-24">
              确定
            </Button>
          </div>
        }
      >
        <div className='mt-1 mb-1' style={{color: "#757575"}}>
          {cdtMetaData.params_description}
        </div>
        <Row gutter={16}>
          <Col className="gutter-row" span={8}>
            <div style={style} className="whitespace-nowrap text-center">
              关键字
            </div>
          </Col>
          <Col className="gutter-row" span={2}>
            <div style={style} className="whitespace-nowrap text-center">
              类型
            </div>
          </Col>
          <Col className="gutter-row" span={6}>
            <div style={style} className="whitespace-nowrap text-center">
              别名
            </div>
          </Col>
          <Col className="gutter-row" span={8}>
            <div style={style} className="whitespace-nowrap text-center">
              可选值
            </div>
          </Col>
        </Row>
        <div
          className="mr-10 w-full overflow-y-auto overflow-x-hidden p-2"
          style={{ height: parentSize ? parentSize.height * 0.75 : '800px' }}
        >
          {params.map((p, index) => (
            <div key={index}>
              <CdtMetadataItem
                key={`cdt_${index}`}
                param={p}
                style={style}
                onParamChange={handleParamChange}
              />
            </div>
          ))}
        </div>
      </Modal>
    </>
  );
};

export default EditCdtMetadataModal;
